import { ProForm, ProFormCascader } from '@/components/Pro';
import { getDeviceCascader } from '@/utils/formatterTree';
import { useModel } from '@@/exports';
import { useIntl } from '@umijs/max';
import { Button, DatePicker, Space } from 'antd';
import dayjs from 'dayjs';
import _ from 'lodash';
import moment from 'moment';
import React, { useEffect, useState } from 'react';
import { SubmitType } from './Type';

type IProps = {
  dateType: string;
  submitForm: (data: SubmitType) => void;
};
const ChartForm: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');
  const { dateType, submitForm } = props;
  const [staticDimension, setStaticDimension] = useState('station');
  const [selectDate, setSelectDate] = useState(
    dateType === 'date' ? dayjs().subtract(1, 'day') : dateType === 'month' ? dayjs() : dayjs(),
  );
  const [treeData, setTreeData] = useState([]);
  // 分区维度
  const [code, setCode] = useState(initialState?.stationId);
  const [areaIdList, setAreaIdList] = useState();
  const [cascaderVal, setCascaderVal] = useState();
  useEffect(() => {
    setSelectDate(
      dateType === 'date' ? dayjs().subtract(1, 'day') : dateType === 'month' ? dayjs() : dayjs(),
    );
  }, [dateType]);
  useEffect(() => {
    getDeviceCascader(false, undefined, ['BMS']).then((res) => {
      setTreeData(res);
      setCascaderVal(res[0].uniqueId);
      submitForm({
        date: selectDate,
        code: code,
        staticDimension: 'station',
        areaIdList: null,
      });
    });
  }, []);
  return (
    <>
      <ProForm layout={'inline'} submitter={false}>
        <ProForm.Item label={intl.formatMessage({ id: 'statistics.income.select' })}>
          <DatePicker
            allowClear={false}
            disabledDate={(current) => {
              return current && current > moment().endOf('day');
            }}
            value={selectDate}
            picker={dateType}
            onChange={(value) => {
              setSelectDate(value);
            }}
          ></DatePicker>
        </ProForm.Item>
        <ProFormCascader
          label={intl.formatMessage({ id: 'statistics.work.dimensions' })}
          fieldProps={{
            allowClear: false,
            value: cascaderVal,
            fieldNames: {
              label: 'deviceName',
              value: 'uniqueId',
              children: 'subDevices',
            },
            changeOnSelect: true,
            options: treeData,
            onChange: (e, params) => {
              setCascaderVal(e);
              const selectedItem = _.last(params);

              setCode(
                selectedItem.nodeType === 'ROOT' ? selectedItem.stationId : selectedItem.deviceCode,
              );
              setStaticDimension(selectedItem.nodeType === 'ROOT' ? 'station' : '');
              setAreaIdList(selectedItem.nodeType === 'AREA' ? selectedItem.areaId : null);

              submitForm({
                date: selectDate,
                code:
                  selectedItem.nodeType === 'ROOT'
                    ? selectedItem.stationId
                    : selectedItem.deviceCode,
                staticDimension: selectedItem.nodeType === 'ROOT' ? 'station' : '',
                areaIdList: selectedItem.nodeType === 'AREA' ? selectedItem.areaId : null,
              });
            },
          }}
          placeholder={intl.formatMessage({ id: 'batteryVoltage.safe.stack' })}
        ></ProFormCascader>
        <ProForm.Item>
          <Space>
            <Button
              type={'primary'}
              onClick={() => {
                submitForm({
                  code: code,
                  date: selectDate,
                  staticDimension: staticDimension,
                  areaIdList: areaIdList,
                });
              }}
            >
              {intl.formatMessage({ id: 'statistics.income.search' })}
            </Button>
            <Button
              onClick={() => {
                setSelectDate(dayjs().subtract(1, 'day'));
                setStaticDimension('station');
                setCascaderVal(treeData[0].uniqueId);
                setAreaIdList(null);
                submitForm({
                  code: initialState?.stationId,
                  date: dayjs().subtract(1, 'day'),
                  staticDimension: 'station',
                  areaIdList: null,
                });
              }}
            >
              {intl.formatMessage({ id: 'statistics.income.reset' })}
            </Button>
          </Space>
        </ProForm.Item>
      </ProForm>
    </>
  );
};

export default ChartForm;
